<template>
	<div class="zoom-img">
		<p class="imgBox">
            <template v-if="imgId">
                <span @click="seeImgFun" :style="{'width': width + 'px', 'margin-left': ml + 'px'}"><Icon type="ios-search-strong"></Icon>{{text}}</span>
                <img :src="source === 0 ? (IMG_SEE + imgId) : imgId" :width="imgWidth">
            </template>
		</p>

        <!-- 查看图片 -->
        <Modal :title="title" v-model="showImg" width="500">
            <div style="text-align:center">
                <img :src="source === 0 ? (IMG_SEE + imgId) : imgId" v-if="showImg" style="height: 100%">
            </div>
            <div slot="footer"></div>
        </Modal>
	</div>
</template>

<script>
	import { IMG_SEE } from '@/service/api';
    export default {
    	props: {
            width: {  //中间黑色块的宽度
                type: Number,
                default: 144
            },
            ml: {   //用于居中定位
                type: Number,
                default: -72
            },
            imgWidth: {
                type: String,
                default: '100%'
            },
            title: {  //弹窗查看图片的title
                type: String,
                default: '查看图片'
            },
            source: {
                type: Number,
                default: 0   // 0--代表来自上传，  1代表来自本地的显示图片
            },
    		imgId:{  //显示的图片id
    			type: String
    		},
    		text: {  //中间显示的文本
    			type: String,
                default: '示例图'
    		}
		},
    	data() {
    		return {
    			IMG_SEE: IMG_SEE,
    			showImg:false //是否显示弹窗
    		}
    	},
    	methods: {
            seeImgFun() {
                this.showImg = true;
            }
        }
    }
</script>

<style lang="less">
	.zoom-img {
		position: relative;
		width: 100%;
		height: 100%;
		.imgBox {
            height: 100%;
			span {
                position: absolute;
                content: '';
                display: inline-block;
                left: 50%;
                top: 50%;
                margin-top: -9px;
                width: 144px;
                // min-width: 70px;
                height: 18px;
                background: @color-Content;
                border-radius: 100px;
                color: #fff;
                opacity: 0.8;
                line-height: 17px;
                font-size: 12px;
                text-align: center;
                font-family: PingFangSC-Regular;
                cursor: pointer;
            }
            img {
                height: 100%;
                border: 1px solid #eee;
            }
            .ivu-icon {
                padding-right: 5px;
                font-size: 14px;
            }
		}
	}
</style>